<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
  <style>
    body{
      background: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.T7y_8gExoPbd2nsxTzQKBwHaED?rs=1&pid=ImgDetMain');
      background-repeat:no-repeat;
      background-size:100%;
    }
    form{
      /* 设置form大小 */
      width: 400px;
      height: 250px;
      background-color: #E1E9EF;
      opacity: 80%;/* 透明度 */
      text-align: center;
      /* 再设置内边距 使得内容更偏向于中央位置 */
      /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
      /* 但是会撑大盒子 */
      padding: 120px 100px;
      font-size: 18px;
      border-radius: 10px;
      margin: 120px auto;/* 上下120px 然后左右居中 */
    }
    .textinput{
      height: 40px;
      width: 300px;
      padding: 0 35px; /* 设置内边距 */
      border: none;/* 去除边框 */
      background: #F8F9F9;
      font-size: 15px;
      box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;/* 给文本框加上阴影 */
      border-radius: 5px; /* 给文本框加上圆角边框 */
      color: saddlebrown;/* 给文本框中输入文字加上颜色 */
    }
    input[type="submit"]{/* type为"submit"的 进行渲染*/
      width: 110px;
      height: 40px;
      text-align: center;/* 内部文本居中 */
      border-radius: 5px; /* 圆角边框 */
      font:16px "黑体";
      background-color: #C0C6CB;
    }
    a {
      text-decoration: none; /* 去除下划线 */
    }

    a:hover {
      text-decoration: underline; /* 悬空的时候有被选中的样子 出现下划线*/
    }
  </style>
</head>
<body>
<form>
  <p>用户名<br />
    用户名：<input type="text" id="name">
  </p>
  <p>密码<br />
    密&nbsp; &nbsp; 码：<input type="text" id="pwd"><br />
    &nbsp; &nbsp; &nbsp; <input type="button" value="提交" onclick="confime()" />
  </p>
</form>
</body>
</html>
<script>
  function confime(){
    var sname=document.getElementById("name").value
    var spwd=document.getElementById("pwd").value
    if(sname=="1"&&spwd=="1"){
      window.open("777.html")
    }
    else
    {
      alert("用户名或密码错误!");
    }
  }
</script>